<template>
  <div class="page-container form-container">
    <!-- 文章标题 -->
    <div class="form-item">
      <div class="title">文章标题</div>
      <el-input v-model="blogDetail.data.title"></el-input>
    </div>
    <!-- 文章编辑 -->
    <div class="form-item">
      <div class="title">文章编辑</div>
      <editor api-key="no-api-key" v-model="blogDetail.data.htmlContent" :init="init" />
    </div>
    <!-- 文章描述 -->
    <div class="form-item">
      <div class="title">文章描述</div>
      <el-input
        v-model="blogDetail.data.description"
        :rows="5"
        type="textarea"
        placeholder="请输入文章描述"
      />
    </div>
    <!-- 文章头图 -->
    <div class="form-item">
      <div class="title">文章头图</div>
      <Upload :image-url="blogDetail.data.thumb" :change-image-url="handleChange" />
    </div>
    <!-- 类型选择 -->
    <div class="form-item">
      <el-select
        @change="handleChangeSelect"
        v-model="blogDetail.data.category.name"
        :placeholder="blogDetail.data.category.name"
      >
        <el-option
          v-for="item in blogDetail.types"
          :key="item.id"
          :label="item.name"
          :value="{
            id: item.id,
            name: item.name,
          }"
        />
      </el-select>
    </div>
    <!-- 按钮 -->
    <div class="form-item">
      <el-button type="primary" @click="handleClick">{{
        id ? "修改完成" : "发布文章"
      }}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getBlogDetail, getBlogTypes, updateBlog, addblog } from "@/api/blog";
import { ref, onBeforeMount, reactive } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import Editor from "@tinymce/tinymce-vue";
import { useRouter } from "vue-router";
import Upload from "@/components/Upload.vue";
// id获取
const id = ref(useRoute().params.id);

// 编辑器版本
const init = {
  height: 500,
  menubar: false,
  language: "zh_CN",
};

// 路由
const router = useRouter();

// 修改图片
function handleChange(val: string) {
  blogDetail.data.thumb = val;
}

// 文章详情
const blogDetail = reactive({
  data: {
    title: "",
    description: "",
    htmlContent: "",
    toc: [],
    thumb: "",
    category: {
      id: "",
      name: "",
    },
  },
  types: [] as any,
});

// 修改分类选择
function handleChangeSelect(val: { id: string; name: string }) {
  blogDetail.data.category = val;
}

// 异步数据请求
async function fetchData() {
  const res = await getBlogDetail(id.value as string);
  if (res.code === 0) {
    blogDetail.data.title = res.data.title;
    blogDetail.data.description = res.data.description;
    blogDetail.data.htmlContent = res.data.htmlContent!;
    blogDetail.data.toc = res.data.toc as any;
    blogDetail.data.thumb = res.data.thumb;
    blogDetail.data.category = res.data.category;
  } else {
    ElMessage({
      message: "获取数据失败！",
      type: "error",
    });
  }
}

//异步请求分类
async function fetchTypes() {
  const types = await getBlogTypes();
  if (types.code === 0) {
    blogDetail.types = types.data;
  } else {
    ElMessage({
      message: "获取数据失败！",
      type: "error",
    });
  }
}

//异步提交数据内容
async function handleClick() {
  // 提交的数据
  const handleBlogObj = {
    title: blogDetail.data.title,
    description: blogDetail.data.description,
    createDate: new Date().getTime(),
    categoryId: blogDetail.data.category.id,
    htmlContent: blogDetail.data.htmlContent,
    thumb: blogDetail.data.thumb,
    markdownContent: blogDetail.data.htmlContent,
  };
  // 判断
  if (
    handleBlogObj.title &&
    handleBlogObj.description &&
    handleBlogObj.categoryId &&
    handleBlogObj.htmlContent
  ) {
    // 判断为修改还是添加
    if (id.value) {
      await updateBlog(id.value as string, handleBlogObj);
      ElMessage({
        message: "修改文章成功！",
        type: "success",
      });
      router.push("/blog");
    } else {
      const res = await addblog(handleBlogObj);
      if (res.code === 0) {
        ElMessage({
          type: "success",
          message: "添加文章成功!",
        });
        router.push("/blog");
      } else {
        ElMessage({
          type: "error",
          message: res.msg,
        });
      }
    }
  }
}

// 之前进行数据请求
onBeforeMount(() => {
  if (id.value) {
    fetchData();
  }
  fetchTypes();
});
</script>

<style lang="less" scoped>
.form-container {
  .form-item {
    margin: 25px 5px;
    .title {
      color: #333;
      font-size: 17px;
      font-weight: bold;
      line-height: 30px;
      margin: 10px 0;
    }
  }
}
</style>
